<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="/vue/vue.js"></script>
    <script type="text/javascript" src="/js/dayjs.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>由时间戳转化的时间</h1>
        <!-- 计算属性计算得到 -->
        <h2>计算属性得到时间戳: {{ comTime }}</h2>

        <!-- methods -->
        <h2>methods: {{ getTimme() }}</h2>

        <!-- 过滤器得倒时间戳 -->
        <h2>过滤器得倒时间戳(精确到秒)：{{ time | filTime}}</h2>
        <h2>过滤器得倒时间戳(精确天)：{{ time | filTime('YYYY-MM-DD')}}</h2>
        <h2>过滤器得倒时间戳(精确到秒，截取前5个字符)：{{ time | filTime | mySlice}}</h2>

    </div>


    <script type="text/javascript">
        // 创建一个Vue实例
        new Vue({
            el: '#app',
            data: {
                time: 1676210344189,
            },

            computed: {
                comTime() {
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss');
                }
            },

            filters: {
                filTime(value, str='YYYY-MM-DD HH:mm:ss') {
                    console.log(1, value, str);
                    return dayjs(value).format(str);

                },

                mySlice(value) {
                    console.log('2', value);
                    return value.slice(0,5);
                }
            },

            methods: {
                getTimme() {
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                }
            }
        })
    </script>
</body>
</html>